<template>
    <el-sub-menu :index="SubItem.path" popper-class="custom-submenu-popper">
        <template #title>
            <el-icon v-if="SubItem.icon && SubItem.icon !== ''">
                <component :is="SubItem.icon"></component>
            </el-icon>
            <div v-else style="width: 24px"></div>
            <span>{{ SubItem.title }}</span>
        </template>
        <template v-for="item in SubItem.children" :key="item.path">
            <template v-if="!item.children || item.children === 0">
                <el-menu-item :index="item.path">
                    <el-icon v-if="item.icon && item.icon !== ''">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <div v-else style="width: 24px"></div>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
            <template v-else>
                <sub-menu :SubItem='item'></sub-menu>
            </template>
        </template>
    </el-sub-menu>
</template>

<script setup lang="ts">
const props = defineProps(["SubItem"]);
</script>

<style>
/* 自定义下拉菜单样式 */
.custom-submenu-popper {
    background-color: #ffffff !important;
    border: 1px solid #e4e7ed !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.custom-submenu-popper .el-menu {
    background-color: #ffffff;
    border: none;
}

.custom-submenu-popper .el-menu-item {
    height: 40px;
    line-height: 40px;
    color: #333333;
    background-color: #ffffff;
}

.custom-submenu-popper .el-menu-item:hover {
    background-color: #f5f5f5;
    color: #0089fa;
}

.custom-submenu-popper .el-menu-item.is-active {
    background-color: #f0f9ff;
    color: #0089fa;
    font-weight: 500;
}

.custom-submenu-popper .el-sub-menu__title {
    height: 40px;
    line-height: 40px;
    color: #333333;
    background-color: #ffffff;
}

.custom-submenu-popper .el-sub-menu__title:hover {
    background-color: #f5f5f5;
    color: #0089fa;
}
</style>
